<template>
  <div class="discount_box">
    <span class="header">
      {{ dataInfo.name }}
      <div class="line"></div>
    </span>
    <div class="cash-list" v-for="(item, index) in dataInfo.goodsInfoList" :key="index">
      <div class="desc">
        <div class="title">{{ item.ticketName }}</div>
        <div class="label_list" v-if="item.labels">
          <span class="tab label" v-for="item in stringToArray(item.labels)" :key="item">
          {{ item }}
        </span>
        </div>
        <span class="instructions" v-if="item.ticketsDetailsVoList.length || item.productDetail" @click="instructionsClick(item)">
          使用须知 >
        </span>
      </div>
      <van-button
        type="primary"
        size="small"
        class="get-btn"
        loading-type="spinner"
        :loading="receiveLoading"
        @click="handleOrder(item)"
      >
        领取
      </van-button>
    </div>
    <van-popup teleport="body" v-model:show="showUse" round position="bottom" :style="{ 'max-height': '70%' }">
      <BookingPolicy
        :ticketsDetailsVoList="commodityInfo.ticketsDetailsVoList"
        :isShowReceive="true"
        :productDetail="commodityInfo.productDetail"
        @bookingPolicyClose="bookingPolicyClose"
        @handleReceive="handleReceive"
      />
    </van-popup>
    <!-- 优惠券弹窗 -->
    <van-dialog
      :teleport="`#${teleportId}`"
      v-model:show="showCoupon"
      show-cancel-button
      :showConfirmButton="false"
      :showCancelButton="false"
      :close-on-click-overlay="true"
      className="dialog-box"
    >
      <div class="dialog">
        <img src="@/assets/images/icons/dialog_bg.png" class="top-img" alt="" />
        <div class="content">
          <p class="title">领取成功</p>
          <p class="dialog-desc">
            {{`您已成功领取${scenicAreaName}${receiveData.ticketName}`}}
          </p>
          <div class="footer">
            <van-button class="btn-detail" @click="goDetailClick">查看详情</van-button>
            <van-button class="btn-use" @click="goUseClick">立即使用</van-button>
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>
<script setup>
import { ref } from "vue"
import { defineProps } from "vue"
import { useRouter } from "vue-router"
import BookingPolicy from "@/components/booking-policy/BookingPolicy.vue"
import api from "@/api/index.js"

const props = defineProps({
  discountInfo: Object,
  hotpotId: String,
  scenicAreaName: String,
  teleportId: String
})
const router = useRouter()

const handleReceive = () => {
  _getReceiveCateringAppTickets()
}


const showUse = ref(false)
const showCoupon = ref(false)
const dataInfo = ref(null)

dataInfo.value = props.discountInfo;

const goDetailClick = () => {
  router.push({
    path: `/order/${receivedSuccessfullyData.value}`,
    query: {
      type: 'hotPot'
    }
  })
}
const goUseClick = () => {
  router.push({
    path: `/coupon`,
    query: {
      type: 'hotPot',
      id: receivedSuccessfullyData.value
    }
  })
}

const receiveLoading = ref(false)
const receiveData = ref(null)
const receivedSuccessfullyData = ref(null)
const handleOrder = (item) => {
  receiveData.value = item
  receiveLoading.value = true
  _getReceiveCateringAppTickets()
}
const _getReceiveCateringAppTickets = () => {
  const params = {
    goodsDto: {
      buyCount: 1,
      skuId: receiveData.value.id,
      spotId: props.hotpotId
    }
  }
  api.getReceiveCateringAppTickets(params).then((res) => {
    if (res.code === 200 || res.code === '200') {
      showCoupon.value = true
      receivedSuccessfullyData.value = res.data
    }
  }).finally(() => {
    receiveLoading.value = false
  })
}

const commodityInfo = ref(null)
const instructionsClick = (item) => {
  commodityInfo.value = item
  showUse.value = true
  receiveData.value = item
}

const bookingPolicyClose = () => {
  showUse.value = false
}

const stringToArray = (str) => {
  const list = str?.split(',') ?? []
  return list.filter(item => item)
}

</script>
<style lang="scss" scoped>
:deep(.van-button--small) {
  padding: 0 1.5rem;
}
.discount_box{
  margin-bottom: 1.5rem;
}
.line {
  width: 2.5rem;
  height: 0.5rem;
  background: linear-gradient(90deg, #4FAC91 0%, #ECE3AA 83%);
  border-radius: 0.3rem;
  margin-left: 2rem;
}

.header {
  padding-left: 2rem;
  font-weight: bold;
}

.order {
  background: #ffffff;

  &>div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 1rem;

    &>span>span {
      margin-right: 1rem;
      color: #ed6316;
      font-weight: 600;
    }
  }
}

.cash-list {
  display: flex;
  margin: 1rem 2rem 0 2rem;
  justify-content: space-between;
  align-items: center;
  background: #fffffc;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0px 7px 15px 0px rgba(54, 141, 88, 0.05);
}

.avatar {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  overflow: hidden;
  margin-right: 10px;
  vertical-align: text-top;

  img {
    width: 100%;
    height: 100%;
  }
}

.desc {
  display: inline-block;
  width: calc(100% - 110px);
  vertical-align: text-top;

  .title {
    font-size: 1.6rem;
    font-weight: bold;
    color: #333333;
    line-height: 2.2rem;
  }
  .label_list{
    display: flex;
    flex-wrap: wrap;
    margin: .5rem 0 .3rem 0;
    .label{
      padding: 0 .5rem;
      background: rgba(236,227,170,0.45);
      color: #CB9407;
      margin-right: .8rem;
      height: 1.7rem;
      line-height: 1.7rem;
      font-size: 1.3rem;
      margin-bottom: .3rem;
    }
  }
  .instructions{
    color: #999999;
    font-size: 1.2rem;
  }

  p {
    margin-top: 6px;
    font-size: 1.2rem;
    line-height: 1.5;
    color: #666;

    span {
      border-radius: 5px;
      background-color: #d8f8e5;
      color: #4fac91;
      font-size: 0.75rem;
      margin-top: 8px;
      padding: 4px 6px;
      margin-right: 8px;

      &:last-child {
        color: #999999;
        background: transparent;
      }
    }
  }
}

.footer {
  margin-top: 10px;
  text-align: right;
  color: #999;
  font-weight: bold;

  span {
    font-size: 1.4rem;
    vertical-align: sub;
  }

  .old-price {
    text-decoration: line-through;
  }

  .now-price {
    font-size: 2.2rem;
  }
}

.get-btn {
  background: linear-gradient(315deg, #ed6316 0%, #ffca0d 100%);
  border: none;
}

.dialog {
  position: relative;
  padding-top: 26px;
  height: 350px;
}

.top-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.content {
  padding: 120px 20px 20px;
  border-radius: 10px;
  background: #fff;
  color: #666;

  .title {
    font-size: 2.2rem;
    text-align: center;
    color: #ed6316;
    font-weight: bold;
    margin-bottom: 15px;
  }

  .dialog-desc {
    padding: 0 20px;
    margin: auto;
    line-height: 1.5;
    margin-bottom: 50px;
  }

  .footer {
    margin: auto;
    text-align: center;
  }

  .btn-detail,
  .btn-use {
    width: 124px;
    height: 38px;
    line-height: 38px;
    border-radius: 5px;
    border: none;
  }

  .btn-detail {
    margin-right: 10px;
    color: #666;
    background: rgba(0, 0, 0, 0.05);
  }

  .btn-use {
    color: #fff;
    background: linear-gradient(315deg, #ed6316 0%, #ffca0d 100%);
  }
}
</style>
<style>
.dialog-box {
  background: transparent;
}
</style>